import * as echarts from 'echarts'
import React, { useRef, useEffect } from 'react'

export default function (props) {
    const { chartData = [], indicatorData } = props
    console.log(chartData)
    const chartRef = useRef()
    let radarChart = null

    const options = {
        // color: ['#1890FF'],
        radar: {
            indicator: indicatorData,
            splitArea: {
                //分割层级区域样式
                areaStyle: {
                    color: ['#fff', '#fff'],
                },
            },
            axisName: {
                formatter: item => {
                    const target = indicatorData.find(data => data.name === item)
                    return `${target.name}` + '\n' + `{result|${target.value || ''}}`
                },
                rich: {
                    result: {
                        align: 'center',
                        padding: 3,
                        color: '#0089ff',
                    },
                },
                //轴线名称样式
                color: 'rgba(23, 26, 29, 0.6)',
                // fontSize: '0.22rem'
                fontSize: '12px',
            },
            axisLine: {
                //轴线样式
                lineStyle: {
                    color: '#E9E9E9',
                },
            },
            //半径
            radius: 65,
            //区域分割数量
            splitNumber: 2,
        },
        series: [
            {
                type: 'radar',
                data: [
                    {
                        value: chartData,
                        //数据区域样式
                        // areaStyle: {
                        //   color: new echarts.graphic.RadialGradient(0.1, 0.1, 1, [
                        //     {
                        //       color: 'rgba(218,237,255, 0.1)',
                        //       offset: 0,
                        //     },
                        //     {
                        //       color: 'rgba(24,144,255, 0.5)',
                        //       offset: 1,
                        //     },
                        //   ]),
                        // },
                        // label: {
                        //   normal: {
                        //     show: true,
                        //     formatter: function(params) {
                        //       return params.value
                        //     },
                        //     color: 'rgba(23, 26, 29, 0.6)'
                        //   }
                        // }
                    },
                ],
                symbol: 'none',

                lineStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: 'rgba(3, 138, 255, 1)' },
                        { offset: 0.3, color: 'rgba(110, 199, 255, 1)' },
                        { offset: 0.8, color: 'rgba(45, 184, 255, 1)' },
                        { offset: 1, color: 'rgba(24, 255, 220, 1)' },
                    ]),
                    width: 6,
                    cap: 'round',
                },
            },
        ],
    }

    function renderChart() {
        const chart = echarts.getInstanceByDom(chartRef.current)
        if (chart) {
            radarChart = chart
        } else {
            radarChart = echarts.init(chartRef.current)
        }
        radarChart.setOption(options)
    }

    useEffect(() => {
        renderChart()

        return () => {
            radarChart && radarChart.dispose()
        }
    })

    return (
        <React.Fragment>
            <div style={{ width: '5.2rem', height: '4.6rem' }} ref={chartRef} />
        </React.Fragment>
    )
}
